<template>
  <div>
    <el-collapse-transition>
      <div v-show="modeInfo.mode==='manage'">
        <!-- tab start -->
        <div class="tab-container">
          <el-tabs v-model="tabName">
            <el-tab-pane label="商品档案" name="product" />
            <el-tab-pane label="商品类目档案" name="category" />
            <el-tab-pane label="商品服务" name="support" />
          </el-tabs>
        </div>
        <!-- tab end -->

        <!-- content start -->
        <div class="content-container">
          <!-- 商品档案 -->
          <ProductManage v-if="tabName==='product'" :mode-info.sync="modeInfo" />
          <!-- 商品类目档案 -->
          <CategoryManage v-if="tabName==='category'" />
          <!-- 商品服务 -->
          <SupportManage v-if="tabName==='support'" />
        </div>
        <!-- content end -->
      </div>
    </el-collapse-transition>

    <!-- 商品编辑 -->
    <ProductForm v-if="modeInfo.mode==='productForm'" :mode-info.sync="modeInfo" />
  </div>
</template>

<script>
import ProductManage from './components/ProductManage'
import CategoryManage from './components/CategoryManage'
import SupportManage from './components/SupportManage'
import ProductForm from './components/ProductForm'
export default {
  components: {
    ProductManage,
    CategoryManage,
    SupportManage,
    ProductForm
  },
  data() {
    return {
      // 配置
      modeInfo: {
        mode: 'manage',
        modePage: '',
        data: ''
      },
      // 状态
      // 数据
      tabName: 'product'
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /**
       * 数据组
       */
    /**
       * 按钮组
       */
    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* tab */
  .tab-container ::v-deep {
    padding: 20px 20px 0;
    height: 60px;
    border-radius: 6px;
    background-color: #fff;
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }

  /* 内容 */
  .content-container {
    margin-top: 10px;
  }
</style>
